<template>
  <div>
    <el-dialog title="车站详情" :visible.sync="showDialog_" custom-class='dialog_right dialogScroll_detail MkSiteDetail' top="0%" @close='closeDialog("addTypeForm")' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <mk-permission :perms="['Ticket:LineManagement:Site:update']">
          <span class='infoIcon' @click="editSite" ><i class="el-icon-edit"></i> 编辑</span>
        </mk-permission>
        <mk-permission :perms="['Ticket:LineManagement:Site:delete']">
          <span class='infoIcon' @click="deleteSite" ><i class="el-icon-delete"></i> 删除</span>
        </mk-permission>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
        <div class="contentDiv">
          <el-row :gutter="20">
              <el-col :span = "4" class="textAlignRight fontColorThree">车站名称</el-col>
              <el-col :span = "20" class="fontColorTwo">{{detailObj.name}}</el-col>
            </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">简称</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.shortName}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">所属城市</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.cityAddress}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">乘车地址</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.address}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">站点图片</el-col>
            <el-col :span = "20" style="padding-top:10px;">
              <template v-if="detailObj && detailObj.images" v-for="item in detailObj.images">
                <div class="showImgContainer" @click = 'preView(item.accessUrl)'>
                  <img :src="item.thumbImageURL" alt="">
                </div>
              </template>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </el-dialog>

    <!--预览图片-->
    <el-dialog :visible.sync="showUploadFileVisible"  custom-class="show-image-dialog" top="0%">
      <img :src="uploadFileSrc" alt=""/>
    </el-dialog>

    <!--添加/编辑站点-->
    <mk-add-site :showDialog='dialogVisible_edit' :currentSite = 'detailObj'  v-on:closeDialog='closeDialog_edit'></mk-add-site>
  </div>
</template>

<script>
import routeService from '../../../services/route'
import MkAddSite from './MkAddSite.vue'
import MkPermission from "../../../components/MkPermission";
import { mapState } from 'vuex'
export default {
  name: 'MkSiteDetail',
  components: {
    MkAddSite,MkPermission
  },
  props: ['showDialog','currentSiteId'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
  }),
  methods: {
    editSite() {
      this.dialogVisible_edit = true;
    },
    closeDialog_edit(type) {
      this.dialogVisible_edit = false;
      this.showDialog_ = false;
      this.isRefresh = type;
      this.$emit('closeDialog',this.isRefresh);
    },
    preView(src) {
      this.showUploadFileVisible = true;
      this.uploadFileSrc = src;
    },
    deleteSite() {
      this.$confirm('此操作将删除该站点, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmBox_warning'
      }).then(() => {
        routeService.deleteSite({id:this.currentSiteId},data => {
          this.$message.success('删除成功');
          this.isRefresh = 'yes';
          this.showDialog_ = false;
        })
      }).catch(()=>{

      });
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = 'no';
      routeService.loadSiteDetail({id:this.currentSiteId},data => {
         this.detailObj = data.data;
      })
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    return {
      detailObj: {},
      dialogVisible_edit: false,
      showUploadFileVisible: false,
      uploadFileSrc:'',
      isRefresh: 'no',
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
  .MkSiteDetail{
    .el-row{
      line-height: 40px;
      .showImgContainer{
        .showImageInFixedContainer(120px,120px);
        float:left;
        margin-right:20px;
        margin-bottom:20px;
        cursor: pointer;
      }
    }
  }
</style>
